<template>
    <div class="app-container">
        <remote-js src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" :load="markedLoad" ref="script"></remote-js>
        <div v-html="markdowHtml" class="markdown-body"></div>
    </div>
</template>

<script>
export default {
  props: ['context'],
  components: {
    'remote-js': {
      render (createElement) {
        return createElement('script', { attrs: { type: 'text/javascript', src: this.src } })
      },
      props: {
        src: { type: String, required: true },
        load: { type: Function }
      }
    }
  },
  data () {
    return {
      markdowHtml: ''
    }
  },
  methods: {
    markedLoad () {
      /* eslint-disable */
      marked.setOptions({
        renderer: new marked.Renderer(),
        gfm: true,
        tables: false,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false
      })
      this.markdowHtml = marked(this.context, { sanitize: true })
      /* eslint-enable */
    }
  },
  mounted () {
    this.$refs.script.$el.onload = this.markedLoad
  }
}
</script>

<style scoped lang="css">
@import './markdow.css'
</style>
